<template>
	<view class="p-x-10 p-t-10">
		<u-navbar title="个人信息完善" :placeholder="true" titleStyle="color: #fff" bgColor="#2172FC" leftIcon="" />
		<view style="background: #fff" class="b-r-8 p-10">
			<up-text text="请完善个人信息并重新登录!" bold size="18" class="m-b-15"></up-text>
			<my-forms ref="form" :formItem="formItem" :model="data" labelWidth="75px" :rules="rules" />
		</view>
		<view class="p-10 button">
			<button class="button-1" @click="fn">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		messageAdd
	} from '@/api/message.js';
	import {
		onBackPress
	} from '@dcloudio/uni-app';

	onBackPress((options) => {
		console.log(options);
		// 点击虚拟键或者侧滑的时候触发（不允许返回）
		if (options.from === 'backbutton') {
			form.value.$refs.refMyForm.validate().then((val) => {}).catch(() => {
				showToast('请完善个人信息！')
			})
			return true;
		}
		// 否则则允许返回
		return false;
	});

	const userInfo = uni.getStorageSync('userInfo');

	const data = ref({
			'264540466014470145': '["男"]',
			'264540466014470144': userInfo.userNameCN,
			'264704428203638784': userInfo.userId
		}),
		formItem = computed(() => {
			return [{
					label: '姓名',
					prop: '264540466014470144',
					required: true
				},
				{
					label: '性别',
					prop: '264540466014470145',
					itemType: 'radio',
					list: [{
							label: '男',
							value: '["男"]'
						},
						{
							label: '女',
							value: '["女"]'
						}
					],
					required: true
				},
				{
					label: '出生日期',
					prop: '264540466014470146',
					itemType: 'date',
					type: 'date',
					required: true
				},
				{
					label: '联系方式',
					prop: '264540466014470147',
					type: 'number',
					maxlength: 11,
					required: true
				}
			];
		}),
		rules = {
			'264540466014470147': {
				rules: [{
						required: true,
						errorMessage: '请输入联系方式'
					},
					{
						pattern: /^1[3-9]\d{9}$/,
						errorMessage: '联系方式格式错误'
					}
				]
			}
		};

	const form = ref(null);

	function fn() {
		form.value.$refs.refMyForm.validate().then((val) => {
			messageAdd({
				formId: '264341879738138624',
				viewId: '264341879750721536',
				data: data.value
			}).then((res) => {
				if (res.msg == 'success') {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					});
					// uni.clearStorage();
					uni.reLaunch({
						url: '/pages/index/index'
					});
				} else {
					uni.showToast({
						title: res.msg
					});
				}
			});
		});
	}
</script>

<style lang="scss" scoped>
	.button {
		position: fixed;
		width: 90%;
		bottom: 40rpx;
		left: 5%;

		.button-1 {
			color: #fff;
			background: linear-gradient(285deg, #24c68e 4%, #27dc9c 89%);
		}

		.button-2 {
			color: #fff;
			background: linear-gradient(285deg, #3f7efc 4%, #59a6fb 89%);
		}
	}

	:deep() {
		uni-button:after {
			border: 0;
		}
	}
</style>